<template>
    <body>

    <ul>

    <li><router-link :to="{ path: '/' }">主页</router-link></li>

    <li><router-link :to="{ path: '/' }">主页</router-link></li>

    <li>
    <el-input 
            placeholder="请输入内容"
            v-model="searchVal" @keyup.enter.native="onEnterSearch"
            style="margin-top:5px;width:400px;"
            >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input> 

    </li>

    

    

    <!-- 这是头像 -->
   <!--   <el-row class="demo-avatar demo-basic">
    <el-col :span="12">
      <div class="demo-basic--circle">
        <div class="block"><el-avatar :size="40" :src="circleUrl"></el-avatar></div>
        <div class="block" v-for="size in sizeList" :key="size">
          <el-avatar :size="size" :src="circleUrl"></el-avatar>
        </div>
      </div>
    </el-col>  
    </el-row>  -->
    
    <!-- 头像 -->

    <li><router-link :to="{ path: 'login' }">登录</router-link></li>

    <li><router-link :to="{ path: 'register' }">注册</router-link></li>

    </ul>
   

    </body>
</template>
    
<script>


    export default {
        data(){
            return {
                msg:'你好，这里是首页',
                circleUrl:'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3065335715,4197701299&fm=26&gp=0.jpg',
                searchVal:''

                    
            }
        },
        //定义组建标签
        components:{

        },
        filters: {
     
　　    },
        //自定义方法
        methods:{
            // 搜索框 获取值
        onEnterSearch: function(e,searchVal){
            console.log("search: "+ this.searchVal);
        }
    
        },
        //钩子方法
        mounted:function(){
    
            console.log('这是初始化方法');

      
    
        },
        //监听属性
        watch:{
    
    
        },
        //计算属性
        computed:{
    
    
        }
    
    
    
    }
    
</script>
    
<style scoped>
 
  body{
    margin: 0px;
    padding: 0;

  }
    
 ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background:linear-gradient(#fff1eb,#ace0f9);

    height :50px;

    


}
 
  li {

    float: left;

    

}

li a:hover {

    background-color: #111;
    
}

li a {

    display: block;

    color: white;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

}
</style>





